<template>
	<div class="tool-circle" :style="{
		background: attr.background,
		borderColor: attr.borderColor,
		borderWidth: `${attr.borderWidth}px`
	}">
		
	</div>
</template>

<script>
	import mixins from '../mixin'
	export default {
		name: 'tool-circle',
		mixins: [mixins],
		data() {
			return {
				attr: {
					borderColor: '#ddd',
					background: '#fff',
					borderWidth: 1
				},
			};
		},
		pageData: {
			version: '0.0.1',
			name: "tool-circle",
			title: "圆形",
			count: 0,
			width: 160, // 默认宽高
			height: 160,
			config: {
				label: '圆形',
				// 数据源
				dataSource: {
					type: 'api',
					source: ''
				},
				active: [],
				// 属性
				attr: [{
					key: "borderWidth",
					title: "边框大小",
					hidden: false,
					formType: "text-number",
					group: 'basics',
					type: "String",
					data: 2,
				}, {
					key: "borderColor",
					title: "边框颜色",
					formType: "text-string",
					group: 'basics',
					type: "String",
					data: '#ddd',
				}, {
					key: "background",
					title: "背景颜色",
					formType: "text-string",
					group: 'basics',
					type: "String",
					data: '#fff',
				}]
			}
		},
	};
</script>

<style scoped lang="scss">
	.tool-circle {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 1px solid #ddd;
		background-color: #fff;
		transition: all 0.58s;
	}
</style>
